<html lang="en" style="font-size: 49.0667px;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>挖矿详情</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            font-size: 0.28rem;
            background-color: #fff;
        }

        * {
            box-sizing: border-box
        }

        .head {
            width: 100%;
            height: 1.4rem;
            display: flex;
            display: -webkit-flex;
            justify-content: flex-start;
            align-items: center;
            background-color: #fff;
            /* border-bottom: 2px solid rgba(238, 238, 238, 0.6); */
            position: relative;
            box-sizing: border-box;
            overflow: hidden;
            padding-top: 0.4rem;
        }

        .head ul {
            height: 100%;
            display: block;
            margin: 0 auto;
            padding-top: 0.35rem;
        }

        .head ul li {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            position: relative;
            color: #B3B3B3;
            font-size: 0.26rem;
            float: left;
            font-family: PingFang-SC-Medium;
            border: 0.01rem solid #DCDCDC;
            margin: 0;
            width: 1.78rem;
            height: 0.6rem;
        }

        .head ul .active {
            border-radius: 2rem;
            background: #FFD30B;
            text-align: center;
            color: #262626;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border: 0;
        }

        .head ul li:nth-child(1) {
            border-radius: 2rem;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .head ul li:nth-child(2).active {
            border-top-right-radius: 2rem;
            border-bottom-right-radius: 2rem;
        }

        .head ul li:nth-child(2) {
            border-radius: 2rem;
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
        }

        .ishide {
            display: none;
        }

        .typechoose {
            width: 100%;
            height: auto;
            box-sizing: border-box;
            background-color: #fff;
        }

        .chooseItem {
            width: 100%;
            height: 0.61rem;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0.8rem;
            box-sizing: border-box;
        }

        .chooseItem li {
            width: auto;
            height: 0.61rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            font-size: 0.26rem;
            font-family: PingFang SC;
            font-weight: 400;
        }

        .nochoose {
            font-size: 0.26rem;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            border-bottom: 0.04rem solid #ffffff;
        }

        .choosethis {
            font-size: 0.28rem;
            font-weight: 500;
            color: #383838;
            border-bottom: 0.04rem solid #FFB32F;
        }
    </style>
</head>

<body id="test">
    <div class="head">
        <ul class="showHeader">
            <li data-value="goBuy" class="active">
                算力商城
            </li>
            <!-- <li data-value="contract">
                增值服务
            </li> -->
            <li data-value="overTake">
                C2C交易
            </li>
        </ul>
        <p id="showTips"
            style="position: absolute;width:0.8rem;height:1.1rem;right: 0.3rem;top: 0.4rem;display: flex;display: -webkit-flex;align-items: center;justify-content: flex-end;box-sizing: border-box;padding-top: 0.2rem;">
            <img src="../../image/shuomingnewx.png" style="height: 0.52rem;">
        </p>
    </div>
    <div class="typechoose">
        <ul class="chooseItem">
            <li class="nochoose choosethis" data-type="IPFS">
                IPFS
            </li>
            <li class="nochoose" data-type="buyBack">
                经典BTC算力
            </li>
            <li class="nochoose" data-type="noBuyBack">
                高波BTC算力
            </li>
            <!-- <li class="nochoose" data-type="IPFS">
                IPFS
            </li> -->
        </ul>
    </div>
    <script src="../../script/autosize.js"></script>
    <script src="../../script/jquery_three_two_one.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/app.js"></script>
    <script>
        apiready = function () {
            var app = new APP();
            var account = app.getAccount();
            var openFrameHeight = app.accMul(2.05, app.htmlFs);
            var pageParam = api.pageParam;
            var index = 0;
            var textValue = {
                transaction: "goBuy",//交易选择
                chooseType: "IPFS" //选择矿机的种类
            };
            $("body").click(function () {
                app.closeF('power_math');
            });
            app.resume(function () {
                if (index == 0) {
                    app.trigger("orinPageReload");
                }
            });
            app.listen('toOne', function () {
                $(".showHeader>li").eq(0).click();
                $(".chooseItem li").eq(0).click();
            });
            app.listen('toTwo', function () {
                $(".showHeader>li").eq(1).click();
            });
            $(".chooseItem>li").click(function (params) {
                $(this).addClass("choosethis").siblings(".chooseItem>li").removeClass("choosethis").addClass("nochoose");
                textValue.chooseType = $(this).attr("data-type");
                app.trigger("orinChoose", textValue);
            })
            $("#showTips").click(function () {
                var pageValue = {
                    name: "order_description",
                    subpage: "fisrt/order_description",
                    title: "",
                    bgColor:"#FEBE53",
                    param: {
                        pageName: "order_description",
                    }
                }
                app.setNavBarAttr(pageValue);
            });
            $(".showHeader li").on("click", function () {
                var thiz = $(this);
                if (thiz.hasClass('active')) {
                    return;
                } else {
                    thiz.addClass('active').siblings('li').removeClass('active');
                }
                index = $(this).index();
                var openFrameHeight = app.accMul(2.05, document.getElementsByTagName("html")[0].style.fontSize.replace('px', ''));
                app.setStorage('index', index);
                app.closeF("power_index");
                textValue.transaction = $(this).data("value");
                if (textValue.transaction == "overTake") {
                    $("head").css({
                        "borderBottomColor": "#b5b5b5"
                    });
                    app.openFrame({
                        name: "orintime",
                        url: app.hd + "mainpage/orintime.html",
                        bgColor: "",
                        rect: {
                            x: 0,
                            y: app.H * 0.17,
                            w: app.W,
                            h: app.orinDailogHH
                        }
                    });
                } else {
                    app.closeF("orin_dialog");
                    app.closeF("orintime");
                }
                app.trigger("orinChoose", textValue);
            })
            if (pageParam.toTwo && pageParam.toTwo == true) {
                $(".showHeader li").eq(1).click();
            }
            app.listen("goIPFS", function () {
                $(".typechoose").find("li:first-of-type").click();
            })
            app.listen("openBtcList", function () {
                $(".chooseItem").find("li:nth-of-type(2)").click();
            })
        }
    </script>


</body>

</html>